<template>
  <div>
    <!-- 表格    @row-click="RowClickFn"
    :row-class-name="tableRowClassName"-->
    <el-table
      ref="monthlyPlanTable"
      :data="copywritelist"
      style="width: 100%"
      highlight-current-row
    >
      <el-table-column label="标题" width="280">
        <template slot-scope="scope">
          <el-popover
            popper-class="officeweb-popover"
            placement="top-start"
            trigger="hover"
            :content="scope.row.title"
          >
            <p slot="reference">{{ scope.row.title}}</p>
          </el-popover>
          <!-- <p>{{ scope.row.title}}</p> -->
        </template>
      </el-table-column>
      <el-table-column label="标签">
        <template slot-scope="scope">
          <el-popover
            popper-class="officeweb-popover"
            placement="top-start"
            trigger="hover"
            :content="scope.row.label"
          >
            <p slot="reference">{{ scope.row.label}}</p>
          </el-popover>
          <!-- <p>{{ scope.row.label }}</p> -->
        </template>
      </el-table-column>
      <el-table-column label="作者" width="100">
        <template slot-scope="scope">
          <el-popover
            popper-class="officeweb-popover"
            placement="top-start"
            trigger="hover"
            :content="scope.row.name"
          >
            <p slot="reference">{{ scope.row.name}}</p>
          </el-popover>
          <!-- <p>{{ scope.row.name }}</p> -->
        </template>
      </el-table-column>
      <el-table-column label="上架时间" width="100">
        <template slot-scope="scope">
          <p>{{ parseTime(scope.row.createTime,"{y}-{m}-{d}")}}</p>
        </template>
      </el-table-column>
      <el-table-column width="50" label="操作" v-hasPermi="['base:documents:editStatus']">
        <template slot-scope="scope">
          <span
            @click="
              drawer = true;
              RowClickFn(scope.row);
            "
            style="color: #858F9E; cursor: pointer"
          >{{ scope.row.status=="1"?"上架":"下架" }}</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40]"
        :pager-count="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageing.total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import {
  getselectMaterialListApi,
  getselectMaterialEditStatusApi
} from "@/wss/newApi_3-24/officewebsite/selectmaterial.js";

export default {
  name: "associatedwriter",
  data() {
    return {
      labelid: 0, //热词id
      status: "", //状态 0上架 1下架(未上架，微发布)
      // 关联文案列表
      copywritelist: [],
      // 分页参数
      pageing: { pageNum: 1, pageSize: 10, total: 0 }
    };
  },

  methods: {
    getAssociatedWriter(id) {
      console.log("关联文案", id);
      this.labelid = id;
      this.getcopywritelist();
    },
    //查询列表
    async getcopywritelist() {
      let data = {
        labelId: this.labelid,
        status: this.status,
        pageNum: this.pageing.pageNum,
        pageSize: this.pageing.pageSize
      };
      let { rows, code, total } = await getselectMaterialListApi(data);
      if (code == 200) {
        this.pageing.total = total;
        this.copywritelist = rows;
      }
      console.log(this.copywritelist);
    },
    //更改文案上下架状态
    async RowClickFn(row) {
      let status = "0";
      if (row.status == "0") {
        status = "1";
      }
      let res = await getselectMaterialEditStatusApi(row.id, status);
      console.log(res);
      if (res.code != 200) return;
      this.$message({
        message: res.msg,
        type: "success"
      });
      this.getcopywritelist();
    },
    //父组件调用的方法，用来选择上下架状态列表
    changewritetype(status) {
      console.log("改变状态");
      this.status = status;
      this.getcopywritelist();
    },

    handleCurrentChange(pageNum) {
      this.pageing.pageNum = pageNum;
      this.getcopywritelist();
    },
    // 页容量发生改变
    handleSizeChange(pageSize) {
      this.pageing.pageSize = pageSize;
      this.getcopywritelist();
    }
  }
};
</script>

<style scoped>
/* 分页器 */
.pagination {
  text-align: center;
  margin-top: 10px;
}

/* 表格样式 */
::v-deep .el-table .el-table__header-wrapper th {
  background-color: #fff;
}
::v-deep .el-table th.is-leaf {
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
}
::v-deep .el-table th > .cell {
  font-size: 12px;
  color: #909aaa;
}
::v-deep .el-table .cell,
::v-deep .el-table .cell p {
  margin: 0;
  font-size: 14px;
  color: #2e3f5e;
  white-space: wrap !important;
}
::v-deep .el-table .cell .el-button {
  color: #f87a23;
}
::v-deep .el-table .cell .el-table__expand-icon i::before {
  content: "\E791";
}
::v-deep .el-table td {
  /* border-bottom: 0; */
}
::v-deep .el-table td .islight {
  color: #f87a23;
  cursor: pointer;
}
::v-deep .el-table .el-table__expanded-cell[class*="cell"] {
  padding: 0;
}
::v-deep .el-table__expanded-cell .el-table::before {
  height: 0;
}
::v-deep .el-table::before {
  display: none;
}
::v-deep .el-table__expanded-cell .el-table th.is-leaf {
  border-top: 0;
}
::v-deep .el-table__expanded-cell .el-table td {
  border-bottom: 0;
}
</style>
